import { Modal, Select, Input, Space, Table, Spin, Button, Row } from 'ant-design-vue'
import VuePropTypes from 'ant-design-vue/es/_util/vue-types'
import { queryMaterials } from '../service/bill'
import { exitFullScreen, openFullscreen } from './FullScreen'
import './MaterialsSelector.less'

const MaterialsSelectorProps = {
  visible: VuePropTypes.bool
}

const MaterialsSelector = {
  props: MaterialsSelectorProps,
  data () {
    return {
      page: 1,
      pageSize: '10',
      searchedKey: 'oea03',
      searchedValue: '',
      dataSource: [],
      total: 0,
      selectedRows: [],
      selectedRowKeys: [],
      fullscreen: false
    }
  },
  watch: {
    '$props.visible' (newVisible, oldVisible) {
      if (newVisible) {
        this.page = 1
        this.pageSize = '10'
        this.searchedKey = 'oea03'
        this.searchedValue = ''
        this.dataSource = []
        this.total = 0
        this.selectedRows = []
        this.selectedRowKeys = []
        this.queryData()
      }
    }
  },
  methods: {
    async queryData () {
      this.loading = true
      try {
        var result = await queryMaterials(this.page, this.pageSize, this.searchedKey, this.searchedValue)
        if (result.status === 200 && result.data != null) {
          var dataList = result.data.dataList || []
          var totalCount = result.data.totalCount || 0
          this.dataSource = dataList
          this.total = totalCount
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handlePaginationChanged (page, pageSize) {
      this.page = page
      this.pageSize = pageSize
      this.queryData()
    },
    handleCancel () {
      if (this.fullscreen) {
        exitFullScreen()
        this.fullscreen = false
      }
      this.$emit('cancel')
    },
    validate () {
      if (this.fullscreen) {
        exitFullScreen()
        this.fullscreen = false
      }
      this.$emit('ok', this.selectedRows)
    },
    handleFullScreen (evt) {
      if (this.fullscreen) {
        exitFullScreen()
        this.fullscreen = false
        return
      }
      var pNode = (evt || event).currentTarget
      while (!pNode.classList.contains('ant-modal-content')) {
        pNode = pNode.parentElement
      }
      openFullscreen(pNode)
      this.fullscreen = true
    }
  },
  render () {
    const columns = [
      {
        dataIndex: 'oea03',
        title: '客户编号',
        width: 80
      },
      {
        dataIndex: 'oea032',
        title: '客户名称',
        width: 80,
        customRender: (text, record, index) => {
          return <span title={text} class="text-overflow">{text}</span>
        }
      },
      {
        dataIndex: 'oeb04',
        title: '物料编号',
        width: 120
      },
      {
        dataIndex: 'oeb06',
        title: '物料名称',
        width: 280,
        customRender: (text, record, index) => {
          return <span title={text} class="text-overflow">{text}</span>
        }
      },
      {
        dataIndex: 'total_qty',
        title: '总订\n单数',
        width: 50
      },
      {
        dataIndex: 'current_stock',
        title: '当前\n库存',
        width: 50
      },
      {
        dataIndex: 'safe_stock',
        title: '安全\n库存',
        width: 50
      },
      {
        dataIndex: 'demand_total',
        title: '需求\n汇总',
        width: 50
      }
    ]

    return <Modal
      dialogStyle={{
        top: '20px'
      }}
      title={
        <Row type="flex" justify="space-between">
          <span>物料客户选择</span>
          <span style={{ marginRight: '30px' }}>
            <Button size="small" icon={this.fullscreen ? 'fullscreen-exit' : 'fullscreen'} onClick={(evt) => this.handleFullScreen(evt)} />
          </span>
        </Row>
      }
      visible={this.visible}
      onOk={this.validate}
      onCancel={this.handleCancel}
      confirmLoading={this.loading}
      cancelText="取消"
      okText="确定"
      footer={false}
      width={880}
      size="small"
    >
      <Spin spinning={this.loading}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <Row type="flex" justify="space-between" style={{ width: '100%' }}>
            <Space>
              <Select
                size="small"
                v-model={this.searchedKey}
                style={{ width: '100px' }}
                getPopupContainer={(triggerNode) => {
                  var pNode = triggerNode
                  while (!pNode.classList.contains('ant-modal-content')) {
                    pNode = pNode.parentElement
                  }
                  return pNode
                }}
              >
                <Select.Option value="oea03">客户编号</Select.Option>
                <Select.Option value="oeb04">物料编号</Select.Option>
                <Select.Option value="oea032">客户名称</Select.Option>
                <Select.Option value="oeb06">物料名称</Select.Option>
              </Select>
              <span>包含</span>
              <Input.Search
                size="small"
                placeholder="请输入搜索内容"
                v-model={this.searchedValue}
                onSearch={(value) => {
                  console.log(value)
                  this.queryData()
                }}
              />
              <Button size="small" type="primary" onClick={() => this.queryData()}>搜索</Button>
            </Space>
            <Space>
              <Button size="small" onClick={() => this.handleCancel()}>取消</Button>
              <Button size="small" disabled={this.selectedRowKeys.length === 0} type="primary" onClick={() => this.validate()}>确定</Button>
            </Space>
          </Row>
          <Table
            size="small"
            rowKey="rnum"
            columns={columns}
            dataSource={this.dataSource}
            rowSelection={{
              selectedRowKeys: this.selectedRowKeys,
              onChange: (keys, rows) => {
                this.selectedRowKeys = keys
                this.selectedRows = rows
              }
            }}
            customRow={(record) => {
              return {
                props: {

                },
                on: { // 事件
                  click: (event) => {}, // 点击行
                  dblclick: (event) => {
                    this.selectedRows = [record]
                    this.selectedRowKeys = [record.rnum]
                    this.validate()
                  }, // 双击行
                  contextmenu: (event) => {},
                  mouseenter: (event) => {}, // 鼠标移入行
                  mouseleave: (event) => {}
                }
              }
            }}
            pagination={{
              showQuickJumper: true,
              total: this.total,
              showLessItems: true,
              size: this.pageSize,
              current: this.page,
              onChange: this.handlePaginationChanged
            }}
          >
          </Table>
        </Space>
      </Spin>
    </Modal>
  }
}

export default MaterialsSelector
